<template>
    <h1>生命周期</h1>
    <h2>{{ s }}</h2>
    <button @click="fn">更新数据</button>

    <keep-alive>
        <Child></Child>
    </keep-alive>

</template>

<script setup lang='ts'>
import Child from './Child.vue';
import { onBeforeMount,onBeforeUnmount,onBeforeUpdate,onMounted,onRenderTracked,onRenderTriggered,onUnmounted,onUpdated,ref } from 'vue';

let s=ref("开始");
console.log(s);

let fn=()=>{
    s.value="更新";
}

onBeforeMount(()=>{
    console.log("挂载前");
})

onMounted(()=>{
    console.log("挂载后");
})

onBeforeUpdate(()=>{
    console.log("更新前");
})

onUpdated(()=>{
    console.log("更新后");
})

onBeforeUnmount(()=>{
    console.log("销毁前");
})

onUnmounted(()=>{
    console.log("销毁后");
})

onRenderTracked((event)=>{
    console.log("状态跟踪");
    // debugger;//打断点
    console.log(event);
})

// 更新组件内容后触发
onRenderTriggered((event)=>{
    console.log("状态触发");
    console.log(event);
})

</script>

<style scoped>

</style>
